<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}网络文本资源库{% endblock %}</title>
    <!-- 添加缺失的Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 补充必要的样式 -->
    <style>
        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .container {
            flex: 1;
            padding-top: 2rem;
            padding-bottom: 2rem;
        }
        .footer {
            background: #f8f9fa;
            padding: 2rem 0;
            margin-top: auto;
        }
        .text-card {
            margin-bottom: 1.5rem;
            padding: 1.5rem;
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏保持不变 -->

    <div class="container">
        <!-- 添加示例内容 -->
        {% block content %}
        <div class="row">
            <div class="col-md-8">
                <h2>最新文本资源</h2>
                <div class="text-card">
                    <h4>示例新闻标题</h4>
                    <p class="text-muted">2023-10-20 来源：新华网</p>
                    <p>这里是新闻内容示例文本，展示文本资源的基本呈现方式...</p>
                    <div class="badge bg-primary">新闻类</div>
                </div>
                
                <div class="text-card">
                    <h4>文学作品示例</h4>
                    <p class="text-muted">作者：示例作家</p>
                    <p>这里是文学作品示例片段，展示文学创作的文本格式...</p>
                    <div class="badge bg-success">文学类</div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">统计概览</h5>
                        <canvas id="statsChart" style="max-height: 200px"></canvas>
                        <ul class="list-group list-group-flush mt-3">
                            <li class="list-group-item d-flex justify-content-between">
                                <span>总文本量</span>
                                <span class="badge bg-primary">1,234</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between">
                                <span>今日新增</span>
                                <span class="badge bg-success">23</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        {% endblock %}
    </div>

    <!-- 页脚保持不变 -->

    <!-- 添加Chart.js初始化脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 示例统计图表
            const ctx = document.getElementById('statsChart').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['新闻', '文学', '学术', '社交'],
                    datasets: [{
                        data: [40, 30, 20, 10],
                        backgroundColor: [
                            '#4e73df',
                            '#1cc88a',
                            '#36b9cc',
                            '#f6c23e'
                        ]
                    }]
                }
            });
        });
    </script>
</body>
</html>